<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
	
</head>
<body>

<div id="app">
<!--	在有些html标签中 只能出现固定的标签, 比如在table中 只能有thead tbody
		想在这些地方使用自定义的组件标签 就会报错 , 可以使用is 属性 Vue 通过解析这个属性 将这个标签替换成组件
 -->
	<table border="1">
		<thead>
		<th>id</th>
		<th>name</th>
		<th>age</th>
		</thead>
<!--		这里使用 is属性 vue会替换tbody标签为我们自定义的组件-->
		<tbody is="my-tbody"></tbody>
	</table>
	
</div>

<template id="t1">
	
	<tbody>
	<tr v-for="p in persons">
		<td>{{p.id}}</td>
		<td>{{p.name}}</td>
		<td>{{p.age}}</td>
	</tr>
	</tbody>
	
</template>

<script>
	
	let t1 = {
	  template:"#t1",
	  data:function () {  //组件的data 必须是函数 返回数据
	    return {
          persons:[
            {id:1,name:"xiaobai",age:24},
            {id:2,name:"xiaoya",age:24},
            {id:3,name:"xiaoliang",age:24}
          ]
        }
	    }
     
	}
	
	let app = new Vue({
	  el:"#app",
	  components:{
	    "my-tbody":t1   //注册组件
	  }
	  
	})
	
</script>

</body>
</html>